<template>
  <div id="chart2" />
</template>

<script>
import echarts from 'echarts'
import 'echarts-liquidfill'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
export default {
  name: 'LiquidFillChartRight',
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      // const chartDom = this.$refs.chart
      const myChart = echarts.init(document.getElementById('chart2'))
      const option = {

        backgroundColor: '#fff',
        series: [{

          itemStyle: {
            // 将阴影的模糊大小和颜色都设置为透明
            shadowBlur: 0,
            shadowColor: 'transparent'
          },
          type: 'liquidFill',
          radius: '50%',
          color: ['#e35c3f'],
          center: ['30%', '30%'],
          data: [0.42],
          backgroundStyle: {
            borderWidth: 0,
            borderColor: '#fff',
            color: '#ffe5e0'
          },
          outline: {
            itemStyle: {
              borderWidth: 1,
              borderColor: '#e35c3f',
              borderType: 'solid'
            }
          },
          label: {
            normal: { // 此处没有生效，本地生效
              textStyle: {
                fontSize: 20,
                color: '#000'
              }
            }
          }
        },
        {
          itemStyle: {
            // 将阴影的模糊大小和颜色都设置为透明
            shadowBlur: 0,
            shadowColor: 'transparent'
          },
          type: 'liquidFill',
          radius: '50%',
          color: ['#ffc45e'],
          center: ['70%', '30%'],
          data: [0.32],
          backgroundStyle: {
            borderWidth: 0,
            borderColor: '#fff',
            color: '#fff1d9'
          },
          outline: {
            itemStyle: {
              borderWidth: 1,
              borderColor: '#ffc45e',
              borderType: 'solid'
            }
          },
          label: {
            normal: { // 同上
              textStyle: {
                fontSize: 20,
                color: '#000'
              }
            }
          }

        }

        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style scoped>
#chart2{
  width: 100%;
  height: 300px;

}
</style>
